/*
 * @Date         : 2022-03-03 14:17:26
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 16:48:27
 * @Description  : 浏览器全屏组件
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */
import React from 'react'
import { useTranslation } from 'react-i18next'
import { IconMaximize, IconMinimize } from '@douyinfe/semi-icons'
import { Button, Tooltip } from '@douyinfe/semi-ui'
import useFullscreen from '@/hooks/useFullscreen'

import './index.less'

const FullScreen = () => {
  const { t } = useTranslation()

  const [isScreenFull, toggerFullScreen] = useFullscreen()

  const handleToggleScreen = () => {
    toggerFullScreen()
  }
  return (
    <div className="fullscreen" onClick={handleToggleScreen}>
      <Tooltip trigger="hover" content={isScreenFull ? t('layout.unFullscreen') : t('layout.fullscreen')}>
        <Button type="tertiary" theme="borderless" icon={isScreenFull ? <IconMinimize /> : <IconMaximize />} />
      </Tooltip>
    </div>
  )
}

export default FullScreen